<template>
    <nav class="navbar navbar-light" v-if="userinfo===null">
    <div class="container">
        <RouterLink class="navbar-brand" to="/">conduit</RouterLink>
        <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <!-- Add "active" class when you're on that page" -->
            <RouterLink class="nav-link active" to="/">Home</RouterLink>
        </li>
        <li class="nav-item">
            <RouterLink class="nav-link" to="/login" >Sign in</RouterLink>
        </li>
        <li class="nav-item">
            <RouterLink class="nav-link" to="/register" >Sign up</RouterLink>
        </li>
        </ul>
    </div>
    </nav>
    <nav class="navbar navbar-light" v-else>
    <div class="container">
        <RouterLink class="navbar-brand" to="/">conduit</RouterLink>
        <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <!-- Add "active" class when you're on that page" -->
            <RouterLink class="nav-link active" to="/">Home</RouterLink>
        </li>
        <li class="nav-item">
            <RouterLink class="nav-link" to="/editor"> <i class="ion-compose"></i>&nbsp;New Article </RouterLink>
        </li>
        <li class="nav-item">
            <RouterLink class="nav-link" to="/settings"> <i class="ion-gear-a"></i>&nbsp;Settings </RouterLink>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" @click.prevent="toProfile()">
            <img :src="userinfo.image" class="user-pic" />
            {{ userinfo.username }}
            </a>
        </li>
        </ul>
    </div>
    </nav>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useUserStore } from '../store/user';
import { useRouter } from 'vue-router';

let router = useRouter();
let store = useUserStore();
const { userinfo } = storeToRefs(store);
function toProfile(){
    router.push({name:'profile', params:{username:userinfo.value?.username}})
}
</script>
<style scoped>
</style>
